<template>
	<view class="layout gradient-background">
		<custom-navbar title="首页"></custom-navbar>
		<swiper class="swiper-top" :indicator-dots="true" :autoplay="true" 
		indicator-active-color="#fff" indicator-color="rgba(255,255,255,.4)"
		:interval="2000" :duration="500" circular="true">
			<swiper-item v-for="item in imageList" :key="item._id">
				<view class="swiper-item">
					<image :src="item.picurl" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="notice">
			<view class="left">
				<uni-icons type="notification-filled"></uni-icons>
				公告
			</view>
			<view class="center">
				<swiper :autoplay="true" :interval="2000" :duration="500" vertical="true" circular="true">
					<swiper-item v-for="item in noticeList" :key="item._id">
						<view class="swiper-item">{{item.title}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		
		<view class="select">
			<common-title>
				<template #title>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons color="#32de7a" type="calendar"></uni-icons>
						<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in randomImageList" :key="item._id">
						<navigator url="/pages/Preview/Preview">
							<image :src="item.smallPicurl" mode="aspectFill"></image>
						</navigator>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="theme">
			<common-title>
				<template #title>专题精选</template>
				<template #custom>
					<navigator class="more" url="/pages/Classify/Classify" open-type="reLaunch">
						More+
					</navigator>
				</template>
			</common-title>
			<view class="content">
				<theme-item class="theme-item" v-for="item in classifyImageList" :isMore="false" :obj="item"></theme-item>
				<theme-item class="theme-item" :isMore="true" ></theme-item>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import {apiGetBanner,apiGetNotice,apiGetRandomImg,apiGetClassifyImg} from "@/apis.js"
import { reactive, ref } from 'vue';
	var classifyImageList=ref([]);
	var imageList=ref([]);
	var randomImageList=ref([]);
	var noticeList=ref([])
	async function getBannerImg(){
		var bannerData=await apiGetBanner();
		imageList.value=bannerData.data.data;
		console.log(imageList);
	}
	async function getRandomImg(){
		var Data=await apiGetRandomImg();
		randomImageList.value=Data.data.data;
	}
	async function getNotice(){
		var Data=await apiGetNotice();
		// noticeList=Data.data.data;
		noticeList.value=Data.data.data;
	}
	async function getClassifyImage(){
		var Data=await apiGetClassifyImg();
		classifyImageList.value=Data.data.data;
	}
	// uni.startPullDownRefresh({
	// 	success() {
	// 		getClassifyImage();
	// 		getBannerImg();
	// 		getRandomImg();
	// 		getNotice();
	// 		uni.stopPullDownRefresh();
	// 	}
	// })
	getClassifyImage();
	getBannerImg();
	getRandomImg();
	getNotice();
	

</script>

<style lang="scss" scoped>
	// @import url("../../uni.scss");
	.layout{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.swiper-top{
		width: 700rpx;
		height: 340rpx;
		margin-top: calc(160rpx + 10rpx);
		border-radius: 10rpx;
		overflow: hidden;
		swiper-item{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
			}
		}
	}
	.notice{
		width: 700rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #f4f4f4;
		display: flex;
		overflow: hidden;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
		.left{
			width: 140rpx;
			text-align: center;
			display: flex;
			color: #32de7a;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			font-weight: 600;
			height: 80rpx;
			:deep(){
				.uni-icons{
					color: #32de7a !important;
				}
			}
		}
		.center{
			height: 80rpx;
			width: 480rpx;
			padding: 20rpx;
			font-size: 25rpx;
			.swiper-item{
				overflow: hidden;
				white-space: nowrap;//处理元素内的空白字符（如空格、换行符等）
				text-overflow: ellipsis;//文本溢出容器时的显示方式
			}
		}
		.right{
			height: 80rpx;
			width: 80rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
		}
	}
	.select{
		display: flex;
		flex-direction: column;
		align-items: center;
		.date{
			color: #32de7a;
		}
		.content{
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view{
				white-space: nowrap;
				.box{
					width: 200rpx;
					height: 450rpx;
					border-radius: 10rpx;
					margin-right: 15rpx;
					display: inline-block;
					overflow: hidden;
					image{
						width: 100%;
					}
				}
				.box:last-child{margin-right: 30rpx;}
			}
		}
	}
	.theme{
		margin : 50rpx 25rpx;
		.more{
			color: gray;
		}
		.content{
			margin-top: 30rpx;
			margin-bottom: 200rpx;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 15rpx;
		}
	}
</style>
